import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, InputNumber, Tooltip } from 'antd';
import React, { useState } from 'react';

interface Props {
  /**最大添加次数 */
  max: number;
  /** true-只读 */
  isReadOnly?: boolean;
}

/**
 * 【全局超时静默设置】
 * 配置话术流程>>全局设置
 */
export const GlobalTimeout = ({ max, isReadOnly }: Props) => {
  const [maxTimeout, setMaxTimeout] = useState(max);
  return (
    <>
      {/* 超时设置（最多4次）*/}
      {/* 第1-3次超时：超时设置(时间、话术) */}
      <Form.List name={['globalTimeout', 'timeoutScripts']}>
        {(fields, { add, remove }) => (
          <>
            {!isReadOnly && (
              <Form.Item
                className="form-list-item-tit"
                label="全局超时静默设置"
                style={{ flexDirection: 'row' }}
              >
                <Tooltip title={fields.length > 2 ? '最多4次超时设置' : '添加超时设置'}>
                  <Button
                    type="link"
                    onClick={() => {
                      // 添加超时设置
                      setMaxTimeout(maxTimeout + 1);
                      add({ timeout: 5, script: undefined });
                    }}
                    disabled={fields.length > 2 ? true : false}
                  >
                    <PlusCircleOutlined className="form-list-btn-icon" />
                  </Button>
                </Tooltip>
              </Form.Item>
            )}
            {/* 循环体-内部 */}
            {fields.map((field, index) => (
              <div key={field.key} className="form-list-item-wrap unselect-words">
                <Form.Item
                  required={!isReadOnly}
                  label={`第${index + 1}次静默达到`}
                  className="form-list-item-ctn"
                  style={{ flexDirection: 'row' }}
                >
                  <Form.Item
                    {...field}
                    noStyle
                    name={[field.name, 'timeout']}
                    fieldKey={[field.fieldKey, 'timeout']}
                  >
                    <InputNumber
                      min={1}
                      max={100}
                      precision={0}
                      size="middle"
                      placeholder="1-100"
                      className="timeout-number-input"
                      parser={(value: any) => value || 5}
                      disabled={isReadOnly}
                    />
                  </Form.Item>
                  <span className="form-item-last-txt">秒，则播放超时话术</span>
                </Form.Item>
                <Form.Item
                  {...field}
                  name={[field.name, 'script']}
                  fieldKey={[field.fieldKey, 'script']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      max: 500,
                      message: `请输入第${index + 1}次超时话术`,
                    },
                  ]}
                  required={!isReadOnly}
                  getValueFromEvent={event => {
                    return event.target.value.replace(/\s+/g, '');
                  }}
                >
                  <Input.TextArea
                    maxLength={500}
                    placeholder="请输入超时话术"
                    disabled={isReadOnly}
                  />
                </Form.Item>
                {!isReadOnly && (
                  <Tooltip title="删除设置">
                    <MinusCircleOutlined
                      className="form-list-btn-icon  btn-delete"
                      onClick={() => {
                        setMaxTimeout(maxTimeout - 1);
                        remove(field.name);
                      }}
                    />
                  </Tooltip>
                )}
              </div>
            ))}
          </>
        )}
      </Form.List>
      {/* 第4次超时：挂机话术 */}
      <div className="form-list-last-item unselect-words">
        <Form.Item
          label={`第${maxTimeout}次静默达到`}
          required={!isReadOnly}
          className="form-list-item-ctn"
          style={{ flexDirection: 'row' }}
        >
          <Form.Item name={['globalTimeout', 'timeoutHangupTimeout']} noStyle>
            <InputNumber
              min={1}
              max={100}
              precision={0}
              placeholder="1-100"
              parser={(value: any) => value || 5}
              className="timeout-number-input"
              disabled={isReadOnly}
            />
          </Form.Item>
          <span className="form-item-last-txt">秒，则执行挂机</span>
        </Form.Item>
        <Form.Item
          name={['globalTimeout', 'timeoutHangupScript']}
          rules={[
            {
              required: true,
              whitespace: true,
              max: 500,
              message: '请输入挂机话术',
            },
          ]}
          required={!isReadOnly}
        >
          <Input.TextArea maxLength={500} placeholder="请输入挂机话术" disabled={isReadOnly} />
        </Form.Item>
      </div>
    </>
  );
};
